<template>
  <div>
    <el-form :inline="true" :model="cForm" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select v-model="cForm.category1ID" placeholder="请选择" :disabled="show" @change="handle1">
          <el-option v-for="item1 in list1" :key="item1.id" :label="item1.name" :value="item1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="cForm.category2ID" placeholder="请选择" :disabled="show" @change="handle2">
          <el-option v-for="item2 in list2" :key="item2.id" :label="item2.name" :value="item2.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="cForm.category3ID" placeholder="请选择" :disabled="show" @change="handle3">
          <el-option v-for="item3 in list3" :key="item3.id" :label="item3.name" :value="item3.id" />
        </el-select>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
export default {
  name: 'Categoryselect',
  props: {
    show: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      // 收集 分类的id
      cForm: {
        category1ID: '',
        category2ID: '',
        category3ID: ''
      },
      // 一级分类数据
      list1: [],
      // 二级分类数据
      list2: [],
      // 三级分类的数组
      list3: []
    }
  },
  mounted() {
    // 组件一上来显示一级分类方法
    this.getCategoryList()
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    // 获取一级分类数据
    async getCategoryList() {
      const result = await this.$API.attr.reqCategory1List()
      // console.log(result)
      if (result.code === 200) {
        this.list1 = result.data
      }
    },
    // 1级分类选择的事件回调
    async handle1() {
      this.list2 = []
      this.list3 = []
      this.cForm.category2ID = ''
      this.cForm.category3ID = ''
      const { category1ID } = this.cForm
      // console.log(category1ID)
      this.$emit('getcategoryId', { categoryID: category1ID, level: 1 })
      const result = await this.$API.attr.reqCategory2List(category1ID)
      // console.log(result)
      if (result.code === 200) {
        this.list2 = result.data
      }
    },
    // 2级分类选择的事件回调
    async handle2() {
      this.list3 = []
      this.cForm.category3ID = ''
      const { category2ID } = this.cForm
      this.$emit('getcategoryId', { categoryID: category2ID, level: 2 })
      const result = await this.$API.attr.reqCategory3List(category2ID)
      console.log(result)
      if (result.code === 200) {
        this.list3 = result.data
      }
    },
    // 3级分类选择的事件回调
    handle3() {
      const { category3ID } = this.cForm
      this.$emit('getcategoryId', { categoryID: category3ID, level: 3 })
    }
  }
}
</script>
